import React from 'react';
import { View, Text, StyleSheet, TouchableOpacity, StatusBar, SafeAreaView } from 'react-native';
import { widthPercentageToDP as wp, heightPercentageToDP as hp } from 'react-native-responsive-screen';
import Ionicons from 'react-native-vector-icons/Ionicons';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';

export default function Money({ navigation, route }) {
    const { money } = route.params || { money: 0 };

    return (
        <SafeAreaView style={{ flex: 1, backgroundColor: '#fff' }}>
            <StatusBar backgroundColor="#CF1322" barStyle="light-content" />
            {/* 顶部导航栏 */}
            <View style={styles.headerWrap}>
                <TouchableOpacity style={styles.headerBack} onPress={() => navigation && navigation.goBack()}>
                    <Ionicons name="chevron-back" size={wp('6%')} color="#fff" />
                </TouchableOpacity>
                <Text style={styles.headerTitle}>我的资产</Text>
                <TouchableOpacity style={styles.headerBtn}>
                    <Text style={styles.headerAction}>资金明细</Text>
                </TouchableOpacity>
            </View>
            {/* 可用余额区 */}
            <View style={styles.balanceBlock}>
                <Text style={styles.balanceLabel}>可用余额</Text>
                <Text style={styles.balanceValue}>{money.toFixed(2)}</Text>
            </View>
            {/* 保证金/冻结资金区 */}
            <View style={styles.assetRow}>
                <View style={styles.assetCol}>
                    <Text style={styles.assetLabel}>保证金</Text>
                    <Text style={styles.assetValue}>1000</Text>
                </View>
                <View style={styles.assetDivider} />
                <View style={styles.assetCol}>
                    <Text style={styles.assetLabel}>冻结资</Text>
                    <Text style={styles.assetValue}>0</Text>
                </View>
            </View>
            {/* 功能入口区 */}
            <View style={styles.content}>
                <TouchableOpacity style={styles.listItem} onPress={() => navigation.navigate('recharge')}>
                    <MaterialCommunityIcons name="currency-cny" size={wp('7%')} color="#FFA500" style={styles.listIcon} />
                    <Text style={styles.listText}>余额充值</Text>
                    <Ionicons name="chevron-forward" size={wp('6%')} color="#bbb" style={styles.arrow} />
                </TouchableOpacity>
                <TouchableOpacity style={styles.listItem}>
                    <MaterialCommunityIcons name="cash-refund" size={wp('7%')} color="#FF9800" style={styles.listIcon} />
                    <Text style={styles.listText}>提现</Text>
                    <Ionicons name="chevron-forward" size={wp('6%')} color="#bbb" style={styles.arrow} />
                </TouchableOpacity>
                <TouchableOpacity style={styles.listItem}>
                    <MaterialCommunityIcons name="credit-card-outline" size={wp('7%')} color="#2196F3" style={styles.listIcon} />
                    <Text style={styles.listText}>收款账户管理</Text>
                    <Ionicons name="chevron-forward" size={wp('6%')} color="#bbb" style={styles.arrow} />
                </TouchableOpacity>
            </View>
        </SafeAreaView>
    );
}

const styles = StyleSheet.create({
    headerWrap: {
        width: wp('100%'),
        height: hp('7.5%'), // 50/667
        backgroundColor: '#CF1322',
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center',
        position: 'relative',
    },
    headerBack: {
        position: 'absolute',
        left: wp('3%'),
        top: 0,
        height: hp('7.5%'),
        justifyContent: 'center',
        alignItems: 'center',
        zIndex: 2,
    },
    headerTitle: {
        color: '#fff',
        fontWeight: 'bold',
        fontSize: wp('4.8%'),
        textAlign: 'center',
    },
    headerBtn: {
        position: 'absolute',
        right: wp('3%'),
        top: 0,
        height: hp('7.5%'),
        justifyContent: 'center',
        alignItems: 'center',
    },
    headerAction: {
        color: '#fff',
        fontSize: wp('3.5%'),
        fontWeight: '400',
    },
    balanceBlock: {
        width: wp('100%'),
        height: hp('18%'), // 120/667
        backgroundColor: '#CF1322',
        alignItems: 'center',
        justifyContent: 'center',
    },
    balanceLabel: {
        color: '#fff',
        fontSize: wp('4%'),
        marginBottom: hp('1%'),
        opacity: 0.7,
    },
    balanceValue: {
        color: '#fff',
        fontSize: wp('10%'),
        fontWeight: 'bold',
    },
    assetRow: {
        width: wp('100%'),
        height: hp('10.5%'), // 70/667
        backgroundColor: '#CF1322',
        flexDirection: 'row',
        alignItems: 'center',
        borderTopWidth: 1,
        borderTopColor: 'rgba(255,255,255,0.2)',
    },
    assetCol: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
    },
    assetLabel: {
        color: '#fff',
        fontSize: wp('3.5%'),
        marginBottom: hp('0.5%'),
        opacity: 0.8,
    },
    assetValue: {
        color: '#fff',
        fontSize: wp('5%'),
        fontWeight: 'bold',
    },
    assetDivider: {
        width: 1,
        height: hp('6%'),
        backgroundColor: 'rgba(255,255,255,0.5)',
    },
    content: {
        backgroundColor: '#fff',
        marginTop: hp('1%'),
        borderRadius: 10,
        overflow: 'hidden',
        alignSelf: 'center',
        width: wp('100%'),
        elevation: 2,
        shadowColor: '#000',
        shadowOffset: { width: 0, height: 2 },
        shadowOpacity: 0.05,
        shadowRadius: 4,
    },
    listItem: {
        flexDirection: 'row',
        alignItems: 'center',
        paddingVertical: hp('2%'),
        paddingHorizontal: wp('4%'),
        borderBottomWidth: 1,
        borderBottomColor: '#f2f2f2',
        backgroundColor: '#fff',
    },
    listIcon: {
        marginRight: wp('4%'),
    },
    listText: {
        flex: 1,
        fontSize: wp('4.5%'),
        color: '#222',
    },
    arrow: {
        marginLeft: wp('2%'),
    },
});